home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / DHTML - Dynamic Content / scrollable-content2.izs < prev    next >
Text File  |  2005-09-01  |  7KB  |  192 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Scrollable content II
  4. <!/TITLE>
  5.  
  6. <!BROWSER>FF1+ IE5+ Opr7+<!/BROWSER>
  7.  
  8. <!DESCRIPTION>Description: We derived our idea for this script from MrShowBiz (now retired), which used a similar setup on its front page to display news headlines. Display content in a confined area. Users can then view the entire content via the automatic scroll up/down functionality. Compatible with all DHTML browsers (IE4+, NS4, NS6), this is a great script to compact and add a touch of interactivity to portions of your page.
  9. <!/DESCRIPTION> 
  10.  
  11. <!CATEGORY>dynamic content<!/CATEGORY>
  12.  
  13. <!SCRIPT>
  14. <!-- START OF SCRIPT -->
  15. <!-- Step 1: Add the following code into the <BODY> section of your page: -->
  16. <script type="text/javascript">
  17.  
  18. /******************************************
  19. * Scrollable content script II- ⌐ Dynamic Drive (www.dynamicdrive.com)
  20. * Visit http://www.dynamicdrive.com/ for full source code
  21. * This notice must stay intact for use
  22. ******************************************/
  23.  
  24. iens6=document.all||document.getElementById
  25. ns4=document.layers
  26.  
  27. //specify speed of scroll (greater=faster)
  28. var speed=5
  29.  
  30. if (iens6){
  31. document.write('<div id="container" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">')
  32. document.write('<div id="content" style="position:absolute;width:170px;left:0;top:0">')
  33. }
  34. </script>
  35.  
  36. <ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
  37. <layer name="nscontent" width=175 height=160 visibility=hidden>
  38.  
  39. <!--INSERT CONTENT HERE-->
  40. <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
  41. combination of HTML, JavaScript, and CSS</font></p>
  42. <p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
  43. <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
  44. content on a page to change on the fly, without reloading the page</font></p>
  45. <p><font size="2" face="Arial">- CSS allows for the separation between content
  46. definition and formatting</font></p>
  47. <p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
  48. <p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
  49. Drive</a> provides free, cut and paste DHTML scripts</font></p>
  50. <!--END CONTENT-->
  51.  
  52. </layer>
  53. </ilayer>
  54.  
  55. <script language="JavaScript1.2">
  56. if (iens6)
  57. document.write('</div></div>')
  58. </script>
  59.  
  60. <table width="175px"><td><p align="right">
  61. <a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a>  <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></p></td>
  62. </table>
  63.  
  64. <script language="JavaScript1.2">
  65. if (iens6){
  66. var crossobj=document.getElementById? document.getElementById("content") : document.all.content
  67. var contentheight=crossobj.offsetHeight
  68. }
  69. else if (ns4){
  70. var crossobj=document.nscontainer.document.nscontent
  71. var contentheight=crossobj.clip.height
  72. }
  73.  
  74. function movedown(){
  75. if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
  76. crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
  77. else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
  78. crossobj.top-=speed
  79. movedownvar=setTimeout("movedown()",20)
  80. }
  81.  
  82. function moveup(){
  83. if (iens6&&parseInt(crossobj.style.top)<=0)
  84. crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
  85. else if (ns4&&crossobj.top<=0)
  86. crossobj.top+=speed
  87. moveupvar=setTimeout("moveup()",20)
  88.  
  89. }
  90.  
  91. function getcontent_height(){
  92. if (iens6)
  93. contentheight=crossobj.offsetHeight
  94. else if (ns4)
  95. document.nscontainer.document.nscontent.visibility="show"
  96. }
  97. window.onload=getcontent_height
  98. </script>
  99. <!-- END OF SCRIPT -->
  100. <!/SCRIPT>
  101.  
  102. <!PREVIEW>
  103. <!-- START OF SCRIPT -->
  104.  
  105. <!-- Step 1: Add the following code into the <BODY> section of your page: -->
  106. <script type="text/javascript">
  107.  
  108. /******************************************
  109. * Scrollable content script II- ⌐ Dynamic Drive (www.dynamicdrive.com)
  110. * Visit http://www.dynamicdrive.com/ for full source code
  111. * This notice must stay intact for use
  112. ******************************************/
  113.  
  114. iens6=document.all||document.getElementById
  115. ns4=document.layers
  116.  
  117. //specify speed of scroll (greater=faster)
  118. var speed=5
  119.  
  120. if (iens6){
  121. document.write('<div id="container" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">')
  122. document.write('<div id="content" style="position:absolute;width:170px;left:0;top:0">')
  123. }
  124. </script>
  125.  
  126. <ilayer name="nscontainer" width=175 height=160 clip="0,0,175,160">
  127. <layer name="nscontent" width=175 height=160 visibility=hidden>
  128.  
  129. <!--INSERT CONTENT HERE-->
  130. <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML is the
  131. combination of HTML, JavaScript, and CSS</font></p>
  132. <p><font size="2" face="Arial">- DOM stands for Document Object Model</font></p>
  133. <p><font size="2" face="Arial">-</font><font size="2" face="Arial"> DHTML allows
  134. content on a page to change on the fly, without reloading the page</font></p>
  135. <p><font size="2" face="Arial">- CSS allows for the separation between content
  136. definition and formatting</font></p>
  137. <p><font size="2" face="Arial">- CSS stands for Cascading style sheet</font></p>
  138. <p><font size="2" face="Arial">- </font><font size="2" face="Arial"><a href="http://www.dynamicdrive.com">Dynamic
  139. Drive</a> provides free, cut and paste DHTML scripts</font></p>
  140. <!--END CONTENT-->
  141.  
  142. </layer>
  143. </ilayer>
  144.  
  145. <script language="JavaScript1.2">
  146. if (iens6)
  147. document.write('</div></div>')
  148. </script>
  149.  
  150. <table width="175px"><td><p align="right">
  151. <a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a>  <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></p></td>
  152. </table>
  153.  
  154. <script language="JavaScript1.2">
  155. if (iens6){
  156. var crossobj=document.getElementById? document.getElementById("content") : document.all.content
  157. var contentheight=crossobj.offsetHeight
  158. }
  159. else if (ns4){
  160. var crossobj=document.nscontainer.document.nscontent
  161. var contentheight=crossobj.clip.height
  162. }
  163.  
  164. function movedown(){
  165. if (iens6&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
  166. crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
  167. else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
  168. crossobj.top-=speed
  169. movedownvar=setTimeout("movedown()",20)
  170. }
  171.  
  172. function moveup(){
  173. if (iens6&&parseInt(crossobj.style.top)<=0)
  174. crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
  175. else if (ns4&&crossobj.top<=0)
  176. crossobj.top+=speed
  177. moveupvar=setTimeout("moveup()",20)
  178.  
  179. }
  180.  
  181. function getcontent_height(){
  182. if (iens6)
  183. contentheight=crossobj.offsetHeight
  184. else if (ns4)
  185. document.nscontainer.document.nscontent.visibility="show"
  186. }
  187. window.onload=getcontent_height
  188. </script>
  189. <!-- END OF SCRIPT -->
  190. <!/PREVIEW>
  191.  
  192. <!RELATED>NONE<!/RELATED>